﻿@import '../../../Geral/_mixins.scss';
@import '../../../Geral/_styles.scss';
@import '../../../Geral/_variaveis.scss';

#sectionHomeLoja {
	@include float(2000px, 100%, 0, 0, true);

	#sectionRecomendados {
		@include float(1000px, 100%, 20px, 0, true);

		.articleRecomendado {
			@include float(auto, 300px, 40px, 35px);
			border-bottom: 2px solid $vermelho;
			text-align: center;

			.divImagemProduto {
				@include float(350px, 100%);
				overflow: hidden;

				img {
					height: 350px;
					max-width: 300px;
				}

				.divDesconto {
					position: relative;
					top: -372px;
					left: -50px;
					height: 350px;
					width: 200px;
					background: url('../../Imagens/Icones/desconto.png') no-repeat left;
					background-size: contain;

					.valorDesconto {
						width: 140px;
						padding: 10px 0;
						padding-right: 10px;
						color: pink;
						font-weight: bold;
						text-align: right;
						background: $vermelho;
					}
				}
			}

			.divNomeProduto {
				@include float(150px, 100%);
				font-size: 30px;
				overflow: hidden;
			}

			.divPrecoProduto {
				@include float(50px, 98%);
				padding: 1%;
			}

			&:hover {
				-moz-box-sizing: border-box;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				border-bottom: 2px solid darken($vermelho, 20%);
				cursor: pointer;

				& > .divPrecoProduto {
					font-weight: normal;
				}
			}
		}
	}

	#sectionNovidades {
		@include float(1000px, 100%, 50px, 0, true);

		.articleNovidades {
			@include float(auto, 300px, 40px, 35px);
			border-bottom: 2px solid $vermelho;
			text-align: center;

			.divImagemProduto {
				@include float(350px, 100%);
				overflow: hidden;

				img {
					height: 350px;
					max-width: 300px;
				}

				.divDesconto {
					position: relative;
					top: -372px;
					left: -50px;
					height: 350px;
					width: 200px;
					background: url('../../Imagens/Icones/desconto.png') no-repeat left;
					background-size: contain;

					.valorDesconto {
						width: 140px;
						padding: 10px 0;
						padding-right: 10px;
						color: pink;
						font-weight: bold;
						text-align: right;
						background: $vermelho;
					}
				}
			}

			.divNomeProduto {
				@include float(150px, 100%);
				font-size: 30px;
				overflow: hidden;
			}

			.divPrecoProduto {
				@include float(50px, 98%);
				padding: 1%;
			}

			&:hover {
				-moz-box-sizing: border-box;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				border-bottom: 2px solid darken($vermelho, 20%);
				cursor: pointer;

				& > .divPrecoProduto {
					font-weight: normal;
				}
			}
		}

	}
}
